1 00:00:00,450 --> 00:00:01,170 All right. 2 00:00:01,170 --> 00:00:05,520 The next thing what we can script on our game is the movement of the player's camera. 3 00:00:05,550 --> 00:00:10,440 The plan is to have the camera see frame set to an invisible part in the workspace, and we want to 4 00:00:10,440 --> 00:00:14,490 be able to move the camera around a little bit based on the position of the player's mouse. 5 00:00:14,610 --> 00:00:19,230 We're also going to be using this module script inside of replicated storage, which is called Camera 6 00:00:19,230 --> 00:00:23,070 Shaker, to easily shake the camera with multiple different presets. 7 00:00:23,280 --> 00:00:29,190 This module script was created by another developer in 2018, and it shows us right here exactly how 8 00:00:29,190 --> 00:00:31,350 we can go ahead and use this module script. 9 00:00:32,240 --> 00:00:35,480 So to get started, let's go ahead and go into starter player scripts. 10 00:00:35,480 --> 00:00:37,880 And we're going to open up our handler section. 11 00:00:37,880 --> 00:00:41,030 And we want to script our camera manipulation handler. 12 00:00:41,510 --> 00:00:44,600 So inside of here we're going to need a few services. 13 00:00:44,600 --> 00:00:46,940 The first service we'll need is the player service. 14 00:00:46,940 --> 00:00:49,550 That way we can get access to the local player. 15 00:00:51,700 --> 00:00:54,640 We want to have a reference to replicated storage. 16 00:00:58,030 --> 00:01:00,370 We'll have a reference to the run service. 17 00:01:00,370 --> 00:01:03,880 That way we can update the position of our camera every single frame. 18 00:01:05,580 --> 00:01:09,450 We'll have a reference to the starter guy and you'll see why in a moment. 19 00:01:11,180 --> 00:01:13,760 And then we're going to have a reference to the tween service. 20 00:01:13,760 --> 00:01:17,390 That way we can smoothly move the position of our camera around. 21 00:01:20,430 --> 00:01:24,060 The next thing we'll have to do is we'll have to create a table for this module script. 22 00:01:24,060 --> 00:01:27,420 Because as you remember, we have to return a table from this module script. 23 00:01:27,420 --> 00:01:29,880 I'm going to call it camera manipulation. 24 00:01:30,300 --> 00:01:33,300 And we'll return it at the very end of our script here. 25 00:01:34,490 --> 00:01:39,110 And that's because we need to have a initialize and start function for this module script. 26 00:01:39,110 --> 00:01:42,380 But before we do that, we'll need some other variables in here. 27 00:01:42,380 --> 00:01:46,880 One is going to be a reference to that camera shaker itself, that module script. 28 00:01:46,880 --> 00:01:49,970 So we'll call it camera shaker and we'll require. 29 00:01:51,020 --> 00:01:53,060 From replicated storage. 30 00:01:53,820 --> 00:01:57,450 And we want to access the modules folder and get our camera shaker. 31 00:01:57,450 --> 00:02:02,190 And we don't have to use Wafer Child because it's already here within the snapshot of our game. 32 00:02:02,190 --> 00:02:07,350 And these scripts won't run until the game has been loaded, so no need to use Wafer Child. 33 00:02:07,830 --> 00:02:14,730 We'll have a reference to the local player so players dot local player we'll have a reference to our 34 00:02:14,730 --> 00:02:17,670 current camera workspace dot current camera. 35 00:02:17,670 --> 00:02:22,290 And then we're going to have a reference to that part in the workspace that we're going to set the camera 36 00:02:22,290 --> 00:02:23,220 C frame to. 37 00:02:23,220 --> 00:02:25,590 So I have an invisible part in here somewhere. 38 00:02:25,590 --> 00:02:26,370 Here it is. 39 00:02:26,580 --> 00:02:30,690 And we're going to have the player's camera basically looking in this general direction. 40 00:02:30,690 --> 00:02:36,360 And when the player's mouse moves around, we kind of want to have the player's camera follow along 41 00:02:36,360 --> 00:02:36,960 with the mouse. 42 00:02:36,960 --> 00:02:39,540 So if it moves down, we'll move the camera down a little bit. 43 00:02:39,540 --> 00:02:43,980 If it goes up, we'll move it up a little bit and so on just to make the game feel a little bit more 44 00:02:43,980 --> 00:02:45,000 interactable. 45 00:02:45,000 --> 00:02:48,720 So we'll call this something like menu camera part. 46 00:02:48,720 --> 00:02:54,870 And it's in the workspace Dot Krusty Krab and it's called menu Camera part. 47 00:02:55,320 --> 00:02:58,350 The last variable we'll need is a reference to the player's mouse. 48 00:02:58,350 --> 00:03:01,980 So we could just do player get mouse. 49 00:03:02,720 --> 00:03:03,380 All right. 50 00:03:03,380 --> 00:03:05,660 Now, some private functions we'll need in here. 51 00:03:05,660 --> 00:03:09,920 One is going to be for enabling the movement of the camera. 52 00:03:10,730 --> 00:03:15,980 So we'll have the camera set up when the initialize function for this module gets run. 53 00:03:15,980 --> 00:03:17,960 And we'll set up the camera movement. 54 00:03:18,470 --> 00:03:22,340 And we're also going to have a function to set up the camera. 55 00:03:22,340 --> 00:03:25,220 Because there's some properties in the camera we'll want to change. 56 00:03:25,220 --> 00:03:27,110 And actually we can fill that out right now. 57 00:03:27,110 --> 00:03:33,740 So in the current camera we want to set the camera type equal to enum dot camera TypeScript label. 58 00:03:33,740 --> 00:03:35,900 That way we can control it through our scripts. 59 00:03:35,900 --> 00:03:41,720 We want to set the key frame of our camera equal to that menu camera parts key frame. 60 00:03:41,720 --> 00:03:46,910 And I want to limit the field of view of our camera so we can set the field of view, not find first 61 00:03:46,910 --> 00:03:50,780 field of view equal to something like 55 degrees. 62 00:03:51,110 --> 00:03:55,550 And then once we've set all that up we can just call our enable camera movement function. 63 00:03:55,550 --> 00:04:01,370 Now down here what we want to do is we want to create a couple functions belonging to this table. 64 00:04:01,370 --> 00:04:07,130 So one function is going to be for initializing this handler or this basically this custom service. 65 00:04:07,130 --> 00:04:10,070 So we're going to call it camera manipulation. 66 00:04:10,070 --> 00:04:13,580 And this function is going to be init for initialize. 67 00:04:14,150 --> 00:04:17,540 And we're also going to have one for starting this handler. 68 00:04:17,540 --> 00:04:21,110 So camera manipulation start. 69 00:04:21,440 --> 00:04:25,790 And all this function is going to do is it's going to call our setup camera function. 70 00:04:26,350 --> 00:04:28,210 Now inside of our initial eyes. 71 00:04:28,210 --> 00:04:37,000 What we want to do here actually, is I want to set the reset button on the player to not be able to 72 00:04:37,000 --> 00:04:38,290 like, be used. 73 00:04:38,290 --> 00:04:43,420 So I don't want to give players the ability to hit escape on their keyboard and then reset themselves 74 00:04:43,420 --> 00:04:47,560 because they're in a lobby, there's no really point for them to reset. 75 00:04:47,560 --> 00:04:53,980 So what we need to do is instead of starter guy, we want to set the core in here. 76 00:04:55,750 --> 00:05:02,320 Of I believe the name is reset button callback and we set this to false. 77 00:05:02,320 --> 00:05:06,250 So what this does is it basically just disables our reset button. 78 00:05:06,790 --> 00:05:13,210 Now one interesting thing to note actually is that the starter GUI or this core scripts may not have 79 00:05:13,210 --> 00:05:15,580 been initialized when we call this function. 80 00:05:15,580 --> 00:05:20,650 So we might get an error message or something in the console that says, uh, the core scripts haven't 81 00:05:20,650 --> 00:05:21,760 been initialized yet. 82 00:05:21,760 --> 00:05:25,990 So what we need to do is we actually need to wrap this function in a p call. 83 00:05:26,260 --> 00:05:28,300 So we could do success. 84 00:05:28,300 --> 00:05:31,510 Results is equal to p call. 85 00:05:31,510 --> 00:05:36,610 We're going to pass starter GUI dot set core or the reference to this function. 86 00:05:37,120 --> 00:05:42,670 And since this function is using the two colons, the first uh argument we need to pass is starter GUI 87 00:05:42,670 --> 00:05:43,510 itself. 88 00:05:43,510 --> 00:05:50,110 Then we can pass our string of reset button callback and then our last argument, which is false. 89 00:05:51,200 --> 00:05:57,770 So in case for some reason the starter GUI or core scripts haven't been initialized, we can check. 90 00:05:57,770 --> 00:06:05,870 So if not successful then we're going to continue trying to disable the players reset button so we can 91 00:06:05,870 --> 00:06:08,210 spawn a loop in here. 92 00:06:08,300 --> 00:06:10,190 And this loop is going to be a repeat loop. 93 00:06:10,190 --> 00:06:14,870 So we're just going to repeat every second of trying to set. 94 00:06:16,180 --> 00:06:21,250 Uh, this here, and we're just going to override success and results with p call. 95 00:06:21,400 --> 00:06:26,890 So we're going to keep repeating this until we are successful in disabling the players reset button. 96 00:06:27,720 --> 00:06:33,900 Now one more thing I want to disable within the starter GUI is the player list, or that list on the 97 00:06:33,900 --> 00:06:36,540 right hand side of the screen that shows all the players in the game. 98 00:06:36,540 --> 00:06:40,380 I just want to disable that to remove as much clutter off the screen as possible. 99 00:06:40,380 --> 00:06:46,710 So in order to do that, we can just reference starter GUI and call a function called Set core GUI enabled. 100 00:06:46,710 --> 00:06:51,990 And we want this to be the core GUI type of player list. 101 00:06:51,990 --> 00:06:53,370 And we just set this to false. 102 00:06:53,370 --> 00:06:56,580 And this is a function we don't have to use p call on. 103 00:06:57,220 --> 00:07:02,140 Okay, so the last thing we need to do here is we need to go ahead and fill out our enable camera movement 104 00:07:02,140 --> 00:07:02,890 function. 105 00:07:03,160 --> 00:07:08,890 So the plan is here is we're going to use the run service to constantly call a function to continually 106 00:07:08,890 --> 00:07:12,130 update the sea frame of our camera. 107 00:07:12,250 --> 00:07:18,280 And because we're going to be updating it every single frame, it's not going to be very wise to call 108 00:07:18,280 --> 00:07:23,890 global functions like sea frame dot new or Vector3 dot new, stuff like that, when we can actually 109 00:07:23,890 --> 00:07:27,610 store a reference to those functions in memory in like local memory. 110 00:07:27,610 --> 00:07:29,680 And it's actually faster doing that way. 111 00:07:29,710 --> 00:07:35,770 So what I'm going to do is I'm going to create a bunch of variables here that reference the global variables 112 00:07:35,770 --> 00:07:38,170 for creating different kind of data types. 113 00:07:38,170 --> 00:07:42,100 So one example we could do is for sea frame new we'll just call it KAF knew. 114 00:07:42,100 --> 00:07:49,000 We want to do one for creating a new vector, three, one for creating a new vector two, and then one 115 00:07:49,000 --> 00:07:51,340 for creating a new tween info. 116 00:07:51,610 --> 00:07:54,340 And we can just set that equal to sea frame dot new. 117 00:07:54,340 --> 00:07:55,690 And we're not calling it. 118 00:07:55,720 --> 00:07:57,970 We're making a reference to this function. 119 00:07:57,970 --> 00:08:05,530 Same thing with vector three dot new, vector two dot new and then tween info dot new. 120 00:08:05,560 --> 00:08:08,230 The next thing I want to do is I want to create a variable. 121 00:08:08,230 --> 00:08:13,450 And I'm going to call this camera shake sea frame or KF for short. 122 00:08:13,450 --> 00:08:17,710 And this is literally just going to be equal to a blank sea frame for now. 123 00:08:17,710 --> 00:08:24,070 But the idea is, is that inside of our camera shaker we have to attach a function in there. 124 00:08:24,070 --> 00:08:28,270 And this function constantly gets called when we enable the camera shaker. 125 00:08:28,270 --> 00:08:33,910 And what this function will do is it'll return back to us the updated keyframe for the camera. 126 00:08:33,910 --> 00:08:35,950 That should give us the correct position. 127 00:08:35,950 --> 00:08:41,020 We need to set on the camera to represent the shake on our screen, so you'll see what I mean in a moment. 128 00:08:41,730 --> 00:08:47,280 But basically what we need to do here is we want to access our camera shaker and we want to create a 129 00:08:47,280 --> 00:08:50,190 new, I believe it's called a camera shake handler. 130 00:08:50,190 --> 00:08:55,650 We need to pass a render priority because it's going to be calling this callback function, uh, binded 131 00:08:55,650 --> 00:08:56,400 to render step. 132 00:08:56,400 --> 00:09:00,240 And you can set the render priority to different levels. 133 00:09:00,240 --> 00:09:05,760 But I just want the render priority to be equal to the camera's render priority, which is in camera 134 00:09:05,760 --> 00:09:06,810 dot value. 135 00:09:06,990 --> 00:09:12,690 And then for the callback function, this function gets called every single time we need to update the 136 00:09:12,690 --> 00:09:15,750 camera keyframe, so it'll pass to us a new keyframe. 137 00:09:15,750 --> 00:09:17,610 We'll just call it camera keyframe. 138 00:09:18,030 --> 00:09:23,160 And what I want to do is I want to constantly update this variable here our camera shake keyframe to 139 00:09:23,160 --> 00:09:25,950 be equal to this newly created keyframe. 140 00:09:25,950 --> 00:09:27,810 So cam keyframe. 141 00:09:27,810 --> 00:09:31,680 Now this constructor here returns back to us another table. 142 00:09:31,680 --> 00:09:39,030 We're just going to call it camera Shake handler, and this camera shake handler has a function in it 143 00:09:39,030 --> 00:09:40,350 actually a bunch of them. 144 00:09:40,350 --> 00:09:43,200 But one of them is to start. 145 00:09:43,200 --> 00:09:48,150 And what this does is it binds this function here that we created to render steps. 146 00:09:48,150 --> 00:09:54,420 And that means this variable here is going to be constantly updated every single frame. 147 00:09:54,420 --> 00:09:58,620 So I'm going to spawn a function and a new thread down here. 148 00:09:59,260 --> 00:10:04,750 And this is just going to loop forever, because what it's going to do is we're going to wait about 149 00:10:04,750 --> 00:10:14,440 like 1.5 seconds, because with our camera shake handler, we want to shake the camera and we can pass 150 00:10:14,440 --> 00:10:17,410 a preset here for how much we want to shake the camera. 151 00:10:17,410 --> 00:10:24,730 So if we actually go inside of our camera shaker, there's some camera shake presets in here. 152 00:10:24,730 --> 00:10:29,170 And they have different names ones bump, explosion, earthquake. 153 00:10:29,170 --> 00:10:35,200 But there is one in here called Light Bounce, which shakes the screen very lightly. 154 00:10:35,410 --> 00:10:38,950 So what we could do here is we could pass camera shaker. 155 00:10:40,430 --> 00:10:46,640 Pass the presets and the preset we want to use is the Light Bounce. 156 00:10:47,500 --> 00:10:53,710 And since we have already started our camera shake handler, that means this camera see frame here is 157 00:10:53,710 --> 00:11:00,370 going to update this variable with the new values that are created when we call the shake function every 158 00:11:00,370 --> 00:11:01,600 1.5 seconds. 159 00:11:02,440 --> 00:11:08,710 So now it is up to us, or it is our responsibility to update the camera see frame, because it's just 160 00:11:08,710 --> 00:11:10,990 going to pass us the see frame itself. 161 00:11:10,990 --> 00:11:13,780 It's not going to update the see frame for us. 162 00:11:13,780 --> 00:11:15,640 We actually need to do that on our own. 163 00:11:15,640 --> 00:11:18,100 So I'm going to create a function inside of here. 164 00:11:18,100 --> 00:11:21,040 And I'm going to call it update cam position. 165 00:11:21,040 --> 00:11:27,550 And what this is going to do is it's going to get the camera's original C frame or aka the exact same 166 00:11:27,550 --> 00:11:28,870 C frame of this part. 167 00:11:28,870 --> 00:11:32,080 So that way the camera is never able to wander off. 168 00:11:32,080 --> 00:11:39,280 We want to stay constricted to the C frame here, and we need to offset the C frame based on the position 169 00:11:39,280 --> 00:11:43,210 of the mouse, and we also need to offset it based on the camera shake. 170 00:11:43,210 --> 00:11:47,950 So when the camera shakes, we need to apply the rotation to make it look like the camera shaking. 171 00:11:48,220 --> 00:11:55,180 So in order to do that, we actually first need to get the coordinates for the center of the screen. 172 00:11:55,180 --> 00:11:58,870 So I'm going to call a variable here called center of screen. 173 00:11:58,870 --> 00:12:03,130 And it's going to be equal to a vector two new. 174 00:12:03,130 --> 00:12:08,050 And what we're going to do is we're going to get the current camera and get the viewport size on the 175 00:12:08,050 --> 00:12:09,100 x axis. 176 00:12:09,100 --> 00:12:13,030 We divide it by two to get the middle of the screen on the x axis. 177 00:12:13,030 --> 00:12:18,100 And then we could do the exact same thing to get the middle of the screen on the y axis. 178 00:12:18,100 --> 00:12:21,310 So now we have a coordinate that's directly in the center of our screen. 179 00:12:21,610 --> 00:12:24,400 And the reason we need a coordinate directly in the center of our screen. 180 00:12:24,400 --> 00:12:26,800 Because that's going to act as our origin point. 181 00:12:26,800 --> 00:12:30,700 So when our mouse moves above the origin point, we want to move the camera up. 182 00:12:30,700 --> 00:12:35,200 When the mouse moves below or to the left or to the right, we want to move it correctly. 183 00:12:35,800 --> 00:12:42,190 And this is because the viewport of our camera's origin actually starts up in the top left corner, 184 00:12:42,190 --> 00:12:48,730 so it's positive in the x axis going this way, and it's positive on the y axis going this way. 185 00:12:48,730 --> 00:12:50,020 So it's a little weird. 186 00:12:51,050 --> 00:12:56,180 So we need to make sure we have the center of the screen to act as our origin point. 187 00:12:56,180 --> 00:13:00,050 Because the next thing I want to do here is I want to create a new tween. 188 00:13:00,050 --> 00:13:04,220 I'm going to call it tween, and we're going to use the tween service to create a new tween. 189 00:13:04,950 --> 00:13:07,290 This twin is going to affect our camera. 190 00:13:08,070 --> 00:13:12,600 And for a new tween info, we can just do something like 0.6 seconds. 191 00:13:12,630 --> 00:13:18,810 So if I move my mouse to over here, it will take about 0.6 seconds to shift the camera to that corresponding 192 00:13:18,810 --> 00:13:19,830 mouse position. 193 00:13:20,040 --> 00:13:24,720 And that means for our property table, we want to update the keyframe of our camera. 194 00:13:25,410 --> 00:13:29,670 To first be equal to the camera's original C frame. 195 00:13:29,820 --> 00:13:35,820 So we want to get the original camera C frame so we can just do current cam dot C frame. 196 00:13:36,270 --> 00:13:39,030 And we want to set it to this original camera C frame. 197 00:13:39,030 --> 00:13:44,850 And then we can add another C frame to offset it based on the mouse's position. 198 00:13:45,000 --> 00:13:48,030 And we're going to do so using a new C frame. 199 00:13:48,640 --> 00:13:54,280 And the reason we're not using a vector here is because I want to shift the camera based on its local 200 00:13:54,280 --> 00:13:58,180 x and y axes, rather than the global X and y axes. 201 00:13:58,450 --> 00:14:03,820 Now, in order to get the correct position of the mouse, what I need to do here is I need to get the 202 00:14:03,820 --> 00:14:10,300 mouse's position by doing mouse dot x, and then I need to subtract it by the center of screen on the 203 00:14:10,300 --> 00:14:11,320 x axis. 204 00:14:11,320 --> 00:14:14,590 So this will give us the pixel position of our mouse. 205 00:14:14,590 --> 00:14:17,230 So let's say my mouse is in the center of the screen. 206 00:14:17,230 --> 00:14:20,950 The x position would be zero because we're subtracting it by the center of the screen. 207 00:14:20,950 --> 00:14:25,300 And then if I move it over to the left we'll get a corresponding number. 208 00:14:25,300 --> 00:14:29,710 Or basically let's say the center of our screen is like 200 pixels. 209 00:14:29,710 --> 00:14:32,530 We move it to the left to 150 pixels. 210 00:14:32,530 --> 00:14:35,950 We'll subtract 150 by 200, and that means we'll get a -50. 211 00:14:35,950 --> 00:14:39,040 So that means we'll want to move the camera to the left. 212 00:14:39,040 --> 00:14:45,340 And then if we go over here and do like 250, then our means our mouse is a positive 50 pixels to the 213 00:14:45,340 --> 00:14:48,400 right of the center of our screen. 214 00:14:48,400 --> 00:14:51,940 And then we're going to do the exact same thing for the y axis. 215 00:14:51,970 --> 00:14:58,510 We just get the mouse's position on the y axis and then subtract it by center of screen dot y. 216 00:14:58,510 --> 00:15:01,150 And then for the z axis, we don't have to worry at all. 217 00:15:01,150 --> 00:15:02,950 So we're just going to set that as zero. 218 00:15:03,460 --> 00:15:10,030 Now one more thing is I also want to multiply or basically add another offset to the key frame which 219 00:15:10,030 --> 00:15:13,150 is going to be the cam shake key frame variable. 220 00:15:13,150 --> 00:15:16,240 So cam shake key frame. 221 00:15:16,240 --> 00:15:18,490 And this will also apply. 222 00:15:18,490 --> 00:15:23,560 You know that shaking of the screen that is produced by our camera shake handler. 223 00:15:24,480 --> 00:15:29,820 Now, one more thing we actually want to make sure that we do is that when a player's character gets 224 00:15:29,820 --> 00:15:36,030 added into the game, it's going to reset the current camera's camera type property back to custom, 225 00:15:36,030 --> 00:15:39,330 which will move the player's camera back to the player's character. 226 00:15:39,990 --> 00:15:46,110 Now, one way we can mitigate this problem is that inside of our setup camera, we can connect an event 227 00:15:46,110 --> 00:15:47,250 to our current camera. 228 00:15:47,250 --> 00:15:48,450 So current cam. 229 00:15:48,450 --> 00:15:52,170 And then we can get property change signal which would be camera type. 230 00:15:53,620 --> 00:15:55,690 And we'll connect a lambda function to this. 231 00:15:55,690 --> 00:16:01,270 And all we want to do is we want to make sure that the camera type of our camera stays as scriptable. 232 00:16:01,910 --> 00:16:06,950 Now, in order to see this in action, what we need to do here is we need to attach this update camera 233 00:16:06,950 --> 00:16:11,360 position to an event inside of a run service. 234 00:16:11,360 --> 00:16:13,340 So run service dot render stepped. 235 00:16:13,340 --> 00:16:17,480 We can go ahead and connect our update camera position function. 236 00:16:17,660 --> 00:16:23,330 So now we can actually go ahead and play and see this camera effect in action. 237 00:16:23,600 --> 00:16:32,360 So currently as you can see our camera is moving way too much because yeah as you can see our camera 238 00:16:32,360 --> 00:16:41,360 is moving actually hundreds of studs because we are representing the camera movement by using the pixels 239 00:16:41,360 --> 00:16:41,930 on the screen. 240 00:16:41,930 --> 00:16:47,300 So since our screen is hundreds of pixels across, when moving the camera around, we're moving it by 241 00:16:47,300 --> 00:16:48,560 hundreds of studs. 242 00:16:49,400 --> 00:16:55,430 So if we want to reduce the amount that we can move the camera, what we need to do is we need to divide 243 00:16:55,430 --> 00:16:57,950 this value here by some amount. 244 00:16:57,950 --> 00:17:04,040 So for example, we could divide this amount by something like 400 and then do it on the same thing 245 00:17:04,040 --> 00:17:05,600 here as well. 246 00:17:06,990 --> 00:17:12,240 And that way we're actually reducing how much, uh, our camera c frame is moving. 247 00:17:12,240 --> 00:17:14,880 So if we go back to play, test this again. 248 00:17:16,810 --> 00:17:23,860 You can see now our camera is moving a lot less, but you may be noticing that it's moving correctly 249 00:17:23,860 --> 00:17:25,390 in the X direction. 250 00:17:25,390 --> 00:17:31,900 But when I do it in the y direction, if I go down, our camera moves up and when I go up, our camera 251 00:17:31,900 --> 00:17:32,830 moves down. 252 00:17:33,490 --> 00:17:41,020 And that's because since our center position will be zero on the y axis, if we increase a number by 253 00:17:41,050 --> 00:17:47,890 going down, we're ending up with a positive pixel compared to the origin point, which is causing our 254 00:17:47,890 --> 00:17:49,060 camera to move up. 255 00:17:49,060 --> 00:17:55,780 And when we go this way, we're ending up with a smaller position with our mouse on the y axis, which 256 00:17:55,780 --> 00:17:57,430 is causing our camera to move down. 257 00:17:57,580 --> 00:18:03,520 So in order to fix that problem, what we could do is we could just reverse this value here by adding 258 00:18:03,520 --> 00:18:05,320 a negative symbol in the front. 259 00:18:06,060 --> 00:18:13,350 Another thing here I'm going to show you is I'm actually going to print this value out inside of the 260 00:18:13,350 --> 00:18:13,950 console. 261 00:18:13,950 --> 00:18:16,140 So let me remove the negative symbol here. 262 00:18:16,140 --> 00:18:18,240 So you can actually go ahead and see what's going on. 263 00:18:19,990 --> 00:18:26,260 So when our mouse is in the center of the screen here, as you can see, it's printing out the position 264 00:18:26,260 --> 00:18:27,940 divided by 400. 265 00:18:28,090 --> 00:18:31,330 So when we reach the center of the screen, it'll print around zero. 266 00:18:31,330 --> 00:18:35,680 And as you can see, when we go down that value is slowly increasing. 267 00:18:35,680 --> 00:18:39,640 And then when we go up it's turning into a negative number. 268 00:18:40,420 --> 00:18:45,310 But of course when we go and negate this value to be negative. 269 00:18:46,590 --> 00:18:51,450 Now when we go and test it, when we go down, it becomes negative. 270 00:18:51,450 --> 00:18:53,760 And when we go up, it becomes positive. 271 00:18:55,420 --> 00:18:59,800 And of course, you're free to go ahead and adjust these values right here to whatever you'd like. 272 00:18:59,800 --> 00:19:04,450 So if you'd like the camera to move more, you could reduce this number by something like 100. 273 00:19:07,600 --> 00:19:12,880 And if we go ahead and test the camera movement now when we go to move the camera around, as you can 274 00:19:12,880 --> 00:19:16,000 see, it's moving a lot more than before. 275 00:19:16,810 --> 00:19:19,120 Now let's go ahead and keep the camera still. 276 00:19:20,930 --> 00:19:27,140 And as you can see, if you look very closely, our camera is shaking just very slightly because we 277 00:19:27,140 --> 00:19:31,670 have that light bounce happening every 1.5 seconds. 278 00:19:31,790 --> 00:19:38,420 And because our update camera position is running every time during this rendered step event, even 279 00:19:38,420 --> 00:19:41,810 if we don't move the camera around, we just keep it at the position of the mouse. 280 00:19:41,810 --> 00:19:46,550 It's still getting that camera shake keyframe applied to it, which is applying that nice little shake 281 00:19:46,550 --> 00:19:47,720 effect on our screen. 282 00:19:48,230 --> 00:19:51,680 So other than that, our camera manipulation handler is complete. 283 00:19:52,240 --> 00:19:56,140 And in the next lecture, we're going to go ahead and get started scripting our starting menu. 284 00:19:56,140 --> 00:19:57,790 So I'll go ahead and see you there.